import React, { useState } from 'react'
import '@nutui/nutui-react/dist/style.css'
import { useNavigate, useSearchParams } from 'react-router-dom'
import { Uploader, Picker, Cell, DatePicker, } from '@nutui/nutui-react'
import instance from '../http/instance'
export default function Xinxi() {
    const nav = useNavigate()
    const [name, setname] = useState('')
    const [search] = useSearchParams()
    const phon = search.get('phon')
    const pwd = search.get('pwd')
    //
    const uploadUrl = 'http://localhost:8000/jiao'
    const onStart = () => {
        console.log('start触发')
    }
    const beforeUpload = async (files: File[]) => {
        const allowedTypes = ['image/png']
        const filteredFiles = Array.from(files).filter((file) =>
            allowedTypes.includes(file.type)
        )
        return filteredFiles
    }
    //
    
    const [visible, setVisible] = useState(false)
    const [baseDesc, setBaseDesc] = useState('')
    const listData1 = [
        [
            { value: 1, text: '男' },
            { value: 2, text: '女' },
        ],
    ]
    const changePicker = (list: any[], option: any, columnIndex: number) => {
        console.log(columnIndex, option)
    }
    const confirmPicker = (
        options: PickerOption[],
        values: (string | number)[]
    ) => {
        let description = ''
        options.forEach((option: any) => {
            description += ` ${option.text}`
        })
        setBaseDesc(description)
    }
    //
    const defaultValue = new Date()
    const defaultDescription = `${defaultValue.getFullYear()}-${defaultValue.getMonth() + 1
        }-${defaultValue.getDate()}`
    const [show, setShow1] = useState(false)
    const [desc1, setDesc1] = useState(defaultDescription)

    const [value, setValue] = useState('2023/01/01')
    const [show2, setShow2] = useState(false)
    const [desc2, setDesc2] = useState('')
    const confirm1 = (values: (string | number)[], options: PickerOption[]) => {
        setDesc1(options.map((option) => option.text).join(' '))
    }
    const change = (options: PickerOption[], values: (string | number)[]) => {
        const v = values.join('/')
        setValue(v)
        setDesc2(options.map((option) => option.text).join(' '))
    }

    //

    const fan = () => {
        nav('/zhu')
    }
    const jiao=async()=>{
        await instance.post(`http://localhost:8000/jiao`,{name:name,sex:baseDesc,times:desc1,img_url:'./1.png',phon:phon,pwd:pwd})
    }

    return (
        <div>
            <div className='gu_Zxin'>
                <svg t="1732936856369" onClick={fan} class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6021" width="32" height="32"><path d="M631.04 161.941333a42.666667 42.666667 0 0 1 63.061333 57.386667l-2.474666 2.730667-289.962667 292.245333 289.706667 287.402667a42.666667 42.666667 0 0 1 2.730666 57.6l-2.474666 2.752a42.666667 42.666667 0 0 1-57.6 2.709333l-2.752-2.474667-320-317.44a42.666667 42.666667 0 0 1-2.709334-57.6l2.474667-2.752 320-322.56z" fill="#111111" p-id="6022"></path></svg>
            </div>
            <h1 className='gu_ZhXin'>请设置你的信息</h1><br />
            <p className='gu_ZpXin'>设置性别后不可更改</p><br />
            <div className='gu_shang'>
                <Uploader
                    beforeUpload={beforeUpload}
                    url={uploadUrl}
                    onStart={onStart}
                    style={{
                        marginInlineEnd: '10px',
                        marginBottom: '10px',
                    }}
                    onChange={(v) => {
                        console.log('outer onChange', v)
                    }}
                />
                <p style={{ fontSize: "10px", color: "gray", marginLeft: '5px' }}>上传头像</p>
            </div>
            <input type="text" className='gu_i' placeholder='设置昵称' value={name} onChange={(e) => {
                setname(e.target.value)
            }} /><br />
            <input type="text" className='gu_i' placeholder='设置性别' value={baseDesc} onChange={(e) => {
                setBaseDesc(e.target.value)
            }} onClick={() => setVisible(!visible)} /><br />
            <input type="text" className='gu_i' placeholder='设置日期' value={desc1} onChange={(e)=>{
                setDesc1(e.target.value)
            }} onClick={() => setShow1(true)} /><br />
            <button className='gu_btn'  onClick={jiao}>开始交友</button>
            <Picker
                title="请选择城市"
                visible={visible}
                options={listData1}
                onConfirm={(list, values) => confirmPicker(list, values)}
                onClose={() => setVisible(false)}
                onChange={changePicker}
            />
            <DatePicker
                title="日期选择"
                visible={show}
                pickerProps={{
                    popupProps: { zIndex: 1220 },
                }}
                defaultValue={new Date(`${defaultDescription}`)}
                showChinese
                onCancel={() => setShow1(false)}
                onConfirm={(options, values) => {
                    setShow1(false)
                    confirm1(values, options)
                    console.log('onconfirm')
                }}
            />
        </div>
    )
}
